class CarouselCard {
    constructor() {
        this.timer = null;
        this.resumeTimer = null; // 用于重新启动轮播的定时器
        //先获取Dom
        this.cardItem = Array.from(document.querySelectorAll('.carousel-card>.carousel-card-item'));
        this.cardArray = ['c-active', 'c-right', 'c-left'];

        this.init();

        this.carouselContainer = document.querySelector('.carousel-card');

        this.addArrows();

        this.addHoverEvents();
    }

    // 添加左右箭头
    addArrows() {
        const leftArrow = document.createElement('div');
        leftArrow.classList.add('arrow', 'arrow-left');
        leftArrow.innerHTML = '<';
        leftArrow.style.position = 'absolute';
        leftArrow.style.top = '50%';
        leftArrow.style.width = '90px';
        leftArrow.style.height = '130px';
        leftArrow.style.display = 'flex';
        leftArrow.style.alignItems = 'center';
        leftArrow.style.justifyContent = 'center';
        leftArrow.style.transform = 'translateY(-72%) scaleY(1.7)';
        leftArrow.style.left = '75px';
        leftArrow.style.fontSize = '24px';
        leftArrow.style.color = 'rgb(255 255 255)';
        leftArrow.style.cursor = 'pointer';
        leftArrow.style.zIndex = '10';
        leftArrow.style.userSelect = 'none';
        leftArrow.style.transition = 'opacity 0.3s';

        const rightArrow = document.createElement('div');
        rightArrow.classList.add('arrow', 'arrow-right');
        rightArrow.innerHTML = '>';
        rightArrow.style.position = 'absolute';
        rightArrow.style.top = '50%';
        rightArrow.style.width = '90px';
        rightArrow.style.height = '130px';
        rightArrow.style.display = 'none';
        rightArrow.style.alignItems = 'center';
        rightArrow.style.justifyContent = 'center';
        rightArrow.style.transform = 'translateY(-72%) scaleY(1.7)';
        rightArrow.style.right = '75px';
        rightArrow.style.fontSize = '24px';
        rightArrow.style.color = 'rgb(255 255 255)';
        rightArrow.style.cursor = 'pointer';
        rightArrow.style.zIndex = '10';
        rightArrow.style.userSelect = 'none';
        rightArrow.style.transition = 'opacity 0.3s';

        // 点击左箭头切换到上一张
        leftArrow.addEventListener('click', () => {
            this.onMove('left');
            this.stopAndRestartAutoPlay();
        });

        // 点击右箭头切换到下一张
        rightArrow.addEventListener('click', () => {
            this.onMove('right');
            this.stopAndRestartAutoPlay();
        });

        this.carouselContainer.appendChild(leftArrow);
        this.carouselContainer.appendChild(rightArrow);
    }

    // 停止自动轮播并在2秒后重新启动
    stopAndRestartAutoPlay() {
        // 先停止自动轮播
        this.stop();

        // 清除之前的重启定时器
        if (this.resumeTimer) {
            clearTimeout(this.resumeTimer);
        }

        // 设置2秒后重新启动自动轮播
        this.resumeTimer = setTimeout(() => {
            this.start();
        }, 2000);
    }

    // 添加鼠标移入移出事件
    addHoverEvents() {
        this.carouselContainer.addEventListener('mouseover', () => {
            const arrows = this.carouselContainer.querySelectorAll('.arrow');
            arrows.forEach(arrow => {
                arrow.style.display = 'flex';
                arrow.style.opacity = '1';
            });
        });

        this.carouselContainer.addEventListener('mouseout', () => {
            const arrows = this.carouselContainer.querySelectorAll('.arrow');
            arrows.forEach(arrow => {
                arrow.style.opacity = '0';
                setTimeout(() => {
                    arrow.style.display = 'flex';
                }, 300); // 这里与 transition 时间一致
            });
        });
    }

    init() {
        const length = this.cardArray.length;

        this.cardItem.forEach((element, index) => {
            element.classList.add(this.cardArray[index]);
        });

        this.createDot();

        this.clickDot();

        this.clickImg();
    }

    onMove(orange = 'right') {
        if (orange == 'left') {
            this.cardArray.push(this.cardArray.shift());
        } else {
            this.cardArray.unshift(this.cardArray.pop());
        }
        
        this.checkedClass();
        this.changeStyle();
        let back = document.querySelector('.carousel-card-item.c-active').dataset.back;
        document.querySelector('.banner').style.backgroundImage = `url(${back})`;
    }

    checkedClass() {
        const length = this.cardArray.length;

        this.cardItem.forEach((element, index) => {
            const className = element.className.split(' ')[1];

            if (this.cardArray.findIndex(cless => cless == className) != -1) {
                element.classList.remove(className);
            }
            element.classList.add(this.cardArray[index]);
        });

        checkedDot(this.cardArray.indexOf('c-active'));
    }

    changeStyle() {
        const dotTools = document.querySelectorAll('.card-dot');
        for (let i = 0; i < dotTools.length; i++) {
            let item = dotTools[i];
            item.style.height = '.7vw';
            item.style.width = '.7vw';
            item.style.border = 'solid .05vw white';
            item.style.cursor = 'pointer';
            item.style.transition = '.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';

            if (item.classList.length == 2) {
                item.style.borderRadius = '.35vw';
                item.style.background = '#007aff';
            } else {
                item.style.borderRadius = '50%';
                item.style.background = '#d5d5d5';
            }
        }
    }

    createDot() {
        const cardRoot = document.querySelector('.carousel-card');
        const dotTools = document.createElement('ul');
        dotTools.style.position = 'absolute';
        dotTools.style.bottom = '4vw';
        dotTools.style.left = '50%';
        dotTools.style.padding = '.05vw';
        dotTools.style.listStyle = '.none';
        dotTools.style.display = 'flex';
        dotTools.style.justifyContent = 'center';
        dotTools.style.alignItems = 'center';
        dotTools.style.gap = '2vw';
        dotTools.style.transform = 'translateX(-50%) translateZ(60px)';
        dotTools.insertAdjacentHTML('beforeend', `
            ${this.cardArray.map((className) =>
                `
                    <p class="${className == 'c-active' ? 'card-dot dot-active' : 'card-dot'}"></p>
                `).join('')}
        `);

        cardRoot.appendChild(dotTools);
        this.changeStyle();
    }

    clickDot() {
        const mirroDot = Array.from(document.querySelectorAll('.card-dot'));

        mirroDot.forEach((dot, index) => {
            dot.onclick = () => {
                const beforeSteep = this.cardArray.indexOf('c-active'), length = this.cardArray.length;

                if (index > beforeSteep) {
                    const isSteep = index - beforeSteep;
                    this.cardArray.unshift(...this.cardArray.splice(length - isSteep, length));
                } else {
                    const isSteep = beforeSteep - index;
                    this.cardArray.push(...this.cardArray.splice(0, isSteep));
                }

                this.checkedClass();

                checkedDot(index);

                this.changeStyle();

                let back = document.querySelector('.carousel-card-item.c-active').dataset.back;
                document.querySelector('.banner').style.backgroundImage = `url(${back})`;
            };

            dot.addEventListener('mouseover', () => {
                dot.style.borderRadius = '.35vw';
                dot.style.background = '#007aff';
                const mirroDot = Array.from(document.querySelectorAll('.card-dot'));
                for (let i of mirroDot) {
                    if (i !== dot) {
                        i.style.borderRadius = '50%';
                        i.style.background = '#d5d5d5';
                    }
                }
                const beforeSteep = this.cardArray.indexOf('c-active'), length = this.cardArray.length;
                if (index > beforeSteep) {
                    const isSteep = index - beforeSteep;
                    this.cardArray.unshift(...this.cardArray.splice(length - isSteep, length));
                } else {
                    const isSteep = beforeSteep - index;
                    this.cardArray.push(...this.cardArray.splice(0, isSteep));
                }
                this.checkedClass();

                checkedDot(index);

                let back = document.querySelector('.carousel-card-item.c-active').dataset.back;
                document.querySelector('.banner').style.backgroundImage = `url(${back})`;
            });
        });
    }

    clickImg() {
        const imgs = Array.from(document.querySelectorAll('.carousel-card-item'));
        const dots = Array.from(document.querySelectorAll('.card-dot'));

        imgs.forEach((el, index) => el.onclick = () => { dots[index].click(); });
    }

    start(steep = 5000) {
        this.timer = setInterval(() => { this.onMove(); }, steep);
    }

    stop() { 
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
}

function checkedDot(index = 2) {
    const mirroDot = Array.from(document.querySelectorAll('.card-dot'));

    mirroDot.forEach((dot) => { 
        if (dot.classList.contains('dot-active')) { 
            dot.classList.remove('dot-active');
        }
    });

    mirroDot[index].classList.add('dot-active');
}

export default CarouselCard;
